<!DOCTYPE html>
<html>
<head>
    <title>WebSocket 测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #output { margin-top: 20px; border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; }
        button { padding: 8px 15px; margin-right: 10px; }
    </style>
</head>
<body>
    <h1>WebSocket 测试</h1>
    
    <div>
        <label>用户ID: <input type="text" id="userId" value="1542068211454779393"></label>
        <label>Token: <input type="text" id="token" value="b8a17c208422448d814596afa7fb0498"></label>
        <button onclick="connect()">连接</button>
        <button onclick="disconnect()" disabled id="disconnectBtn">断开</button>
    </div>
    
    <div>
        <button onclick="sendPing()" disabled id="pingBtn">发送心跳</button>
        <button onclick="sendTestMessage()" disabled id="messageBtn">发送测试消息</button>
    </div>
    
    <div id="output"></div>

    <script>
        let socket;
        const output = document.getElementById('output');
        
        function log(message) {
            const line = document.createElement('div');
            line.textContent = message;
            output.appendChild(line);
            output.scrollTop = output.scrollHeight;
        }
        
        function connect() {
            const userId = document.getElementById('userId').value;
            const token = document.getElementById('token').value || 'test_token_' + Math.random().toString(36).substring(2);
            
            socket = new WebSocket(`ws://192.168.10.78:8000/ws/${userId}?token=${token}`);
            
            socket.onopen = function(e) {
                log("连接已建立");
                document.getElementById('disconnectBtn').disabled = false;
                document.getElementById('pingBtn').disabled = false;
                document.getElementById('messageBtn').disabled = false;
            };
            
            socket.onmessage = function(event) {
                log("收到消息: " + event.data);
            };
            
            socket.onclose = function(event) {
                log("连接已关闭");
                document.getElementById('disconnectBtn').disabled = true;
                document.getElementById('pingBtn').disabled = true;
                document.getElementById('messageBtn').disabled = true;
            };
            
            socket.onerror = function(error) {
                log("连接错误: " + (error.message || "未知错误"));
                log("请检查: 1. 服务是否运行 2. Token是否有效 3. 用户ID是否正确");
                log("详细错误: " + JSON.stringify(error, null, 2));
            };
        }
        
        function disconnect() {
            if (socket) {
                socket.close();
            }
        }
        
        function sendPing() {
            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send("ping");
                log("已发送心跳");
            }
        }
        
        function sendTestMessage() {
            if (socket && socket.readyState === WebSocket.OPEN) {
                const message = {
                    type: "text",
                    content: "这是一条测试消息",
                    timestamp: Date.now()
                };
                socket.send(JSON.stringify(message));
                log("已发送测试消息: " + JSON.stringify(message));
            }
        }
    </script>
</body>
</html>